import React, { Component } from 'react'
import { NavBar } from "antd-mobile"
import SearchInput from "../searchInput/SearchInput"
import "./Category.css"
import axios from "axios"
export default class Category extends Component {
    state = {
        categories: [],
        categories_content: [],
        select_index: 0 //当前选中的菜单
    }
    componentDidMount() {
        axios.get("https://www.linweiqin.cn/api/public/v1/categories").then((res) => {
            console.log(res)
            this.setState({
                categories: res.data.message,
                categories_content: res.data.message[0].children
            })
        }).catch(err => {
            console.log(err)
        })
    }
    handleItemClick = (e) => {
        var select_index = e.target.getAttribute("data-index")
        this.setState({
            select_index,
            categories_content: this.state.categories[select_index].children
        })
    }
    handleProductItemClick = (e) => {
        var cid = e.target.getAttribute("data-index")
        console.log(cid)
        console.log(this.props)
        this.props.history.push("/goodList?cid=" + cid)
    }
    render() {
        return <div className="yg-category">
            {/* 导航 */}
            <div className="yg-category-nav">
                <NavBar className="category-nav">
                    商品分类
                </NavBar>
            </div>
            {/* 搜索框 */}
            <div className="yg-category-search">
                <SearchInput></SearchInput>
            </div>
            {/* 分类菜单 */}
            <div className="yg-category-content">
                <div className="content-left" onClick={this.handleItemClick}>
                    {
                        this.state.categories.map((val, ind) => {
                            return <div
                                className={this.state.select_index == ind ? 'active content-left-item' : 'content-left-item'}
                                key={val.cat_id}
                                data-index={ind}
                            > {val.cat_name}

                            </div>
                        })
                    }
                </div>
                <div className="content-right">
                    {
                        this.state.categories_content.map((v, i) => {
                            return <div className="content-right-item" key={v.cat_id}>
                                <div className="right-item-title">
                                    {"/"}{v.cat_name}{"/"}
                                </div>
                                <div className="product-list" >
                                    {
                                        v.children && v.children.map(v => {
                                            return <div className="product-list-item" key={v.cat_id} data-index={v.cat_id}>
                                                <div className="imagerWarapper">
                                                    <img src={v.cat_icon} alt="" data-index={v.cat_id} onClick={this.handleProductItemClick} />
                                                </div>
                                                <div className="item-title" data-index={v.cat_id}>
                                                    {v.cat_name}
                                                </div>
                                            </div>
                                        })
                                    }
                                </div>
                            </div>
                        })
                    }
                </div>
            </div>
        </div >;
    }
}
